<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#add").click(function () {
                let inText = $("#inText").val();
                // DOM对象
                let li = "<li>" + inText + "</li>";

                // 使用html方法实现
                // $("ul").html($("ul").html() + li);

                // 使用文档处理实现
                // a.append(b):将b加入到a的标签体的末尾
                // jquery函数的调用者必须是jquery对象
                // 此时的a必须是jquery对象,b随意
                // $("ul").append(li);
                // b.appendTo(a):将b加入到a的标签体的末尾
                // 此时的b必须是jquery对象,a随意
                $(li).appendTo($("ul"));
            });

            $("li").click(function(){
                // let inText = $(this).html();
                // let li = "<li>" + inText + "</li>";
                // 克隆调用者,该方式只克隆元素,不克隆事件
                // let li = $(this).clone();
                // 如果想要克隆事件,通过参数true表示
                let li = $(this).clone(true);
                $("ul").append(li);
            });
            $("#add2").click(function(){
                let inText = $("#inText").val();
                // DOM对象
                let li = "<li>" + inText + "</li>";

                // $("li:first").before(li);
                // $(li).insertBefore($("li:first"))
                // $("li:last").after(li);
                $(li).insertAfter($("li:last"))
            });
            $("#empty").click(function(){
                $("ul").empty();
            });
            $("#remove").click(function(){
                $("ul").remove();
            });
        })
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="add">内部插入方式追加</button>
<button id="add2">外部插入方式追加</button>
<button id="empty">清空列表</button>
<button id="remove">删除列表</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>